<template>
  <v-chart class="chart" :option="option" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const { propsOption } = defineProps({
  propsOption: {
    type: Object,
    default: () => ({
      text: 'text',
      subtext: 'subtext',
      data: []
    })
  }
});
const option = ref({
  title: {
    text: propsOption.text,
    subtext: propsOption.subtext,
    left: '10'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    bottom: '0',
    left: 10
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: '80%',
      data: propsOption.data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        formatter: '{b}\n {c}',
      },

    }
  ]
});
</script>

<style scoped lang="less"></style>
